<template>
	<eui-page-frame :topHeight="170">
		<template #top>
			<view class="content-img">
				<eui-nav-bar title="加入群组" color="#000000"  rightIcon=""  />
			</view>
		</template>
		<eui-page-content>
			<eui-base-card title="我的群组">
				<view v-if="myGroup.length>0"  class="tab-content-li flex justify-content-space-between" :class="[index!=myGroup.length-1?'border-bottom':'']"
					v-for="(item, index) in myGroup" :key="index" @click="exitGroup(item)">
					<view class="flex-row menu-row-2">
						<view class="img-box">
							<eui-uicons size='60' fontFamily="enjoyIcon5" customPrefix="icon-qunzu"
								:color="themeColor" />
						</view>
						<view class="center-box">
							<view class="title ellipsis-line-2">{{ item.c_group_title }}</view>
							<view class="description text-ellipsis">{{ item.c_group_content }}</view>
						</view>
					</view>
					<view class="right-box">
						<view class="right-box-text">退出群组</view>
						<eui-uicons size='24' fontFamily="enjoyIcon5" customPrefix="icon-jiantouxiangyou"
							color="#888888" />
					</view>
				</view>
				<view v-else>
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂未加入任何群组</view>
				</view>
			</eui-base-card>
			<eui-base-card title="可加入群组">
				<view v-if="canJoinGroup.length>0" class="tab-content-li flex justify-content-space-between" :class="[index!=canJoinGroup.length-1?'border-bottom':'']"
					v-for="(item, index) in canJoinGroup" :key="index" @click="joinGroup(item)">
					<view class="flex-row menu-row-2">
						<view class="img-box">
							<eui-uicons size='60' fontFamily="enjoyIcon5" customPrefix="icon-qunzu"
								:color="themeColor" />
						</view>
						<view class="center-box">
							<view class="title ellipsis-line-2">{{ item.c_group_title }}</view>
							<view class="description text-ellipsis">{{ item.c_group_content }}</view>
						</view>
					</view>
					<view class="right-box">
						<view class="right-box-text">加入群组</view>
						<eui-uicons size='24' fontFamily="enjoyIcon5" customPrefix="icon-jiantouxiangyou"
							color="#888888" />
					</view>
				</view>
				<view v-else>
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂无任何可加入的群组</view>
				</view>
			</eui-base-card>
		</eui-page-content>

	</eui-page-frame>

</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { storeToRefs } from 'pinia';
	import { onLoad } from "@dcloudio/uni-app";
	import { useThemeStore } from '@/store/themeStore';
	import useService from '@/hooks/useService';
	import { useMainStore } from "@/store/modules/store";
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const themeColor = ref(theme._object.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')
	const mainService = useService({ prefix: "mainApi" });
	const mainStore = useMainStore();
	const { loginInfo } = mainStore;
	console.log('loginInfo',loginInfo)
	const allGroup = ref([]);
	const userRole = ref([]);
	const myGroup = ref([]);
	const canJoinGroup = ref([]);

	onLoad(async () => {
		await refreshRoleData();
	})
	const refreshRoleData = async() => {
		await fetchTaskClassRole();
		await FetchUserRoles();
		myGroup.value = allGroup.value.filter(x=>userRole.value.find(y=>y.Code===x.c_group_code));
		canJoinGroup.value = allGroup.value.filter(x=>!myGroup.value.find(y=>y.c_group_code === x.c_group_code));
	}
	//任务角色
	const fetchTaskClassRole = async ()=>{
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await mainService.request('taskdefine', 'FetchEffectiveTaskClass', '');
		uni.hideLoading();
		if(res){
			allGroup.value = res.map(x=>{
				return{
					c_group_code:x.Code,
					c_group_title:x.Name,
					c_group_content:x.Name
				}
			})
		}
	}
	//当前用户的所有角色
	const FetchUserRoles = async () =>{
		uni.showLoading({ title: "查询中...", mask: true });
		const res = await mainService.request('h5UserGroup', 'FetchUserRoles', loginInfo.sUser);
		uni.hideLoading();
		userRole.value = res;
	}

	const joinGroup = async (item)=>{
		userRole.value.push({
				RoleClass: "4",
				Code: item.c_group_code,
			});
		UpdateUserRols(userRole.value);
	}
	const exitGroup = async(item)=>{
		userRole.value = userRole.value.filter(x=>x.Code!=item.c_group_code);
		UpdateUserRols(userRole.value);
	}
	const UpdateUserRols = async (roleItems) =>{
		const req =  {
			UserNo: [loginInfo.sUser],
			RoleItems: roleItems,
			isOverwrite: true ,
		}
		uni.showLoading({ title: "处理中...", mask: true });
		const res = await mainService.request('h5UserGroup', 'UpdateUserRols', req);
		uni.hideLoading();
		console.log('UpdateUserRols',res)
		await refreshRoleData();
	}
</script>

<style lang="scss">
	@import '../../../main.scss';
	@import '../../../static/font/enjoyicon5.0/iconfont.css';

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
		margin-top: -40rpx;
	}

	.no-data-text {
		text-align: center;
		color: #cccccc;
		font-size: 24rpx;
    margin-top: -10rpx;
    margin-bottom: 20rpx;
	}

	.flex {
		display: flex;
	}

	.padding-32 {
		padding: 0 32rpx;
	}

	.content {
		height: 88rpx;
		align-items: center;
		justify-content: space-between;
	}

	.iconfont {
		font-size: 20px;
		width: 40px;
		height: 100%;
		text-align: center;
		line-height: 37px;
		@include themeText("themeText");
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.font-size-32 {
		font-size: 32rpx;
	}

	.font-size-48 {
		font-size: 48rpx !important;
	}

	.color-fff {
		color: #fff !important;
	}

	.color-888 {
		color: rgba(136, 136, 136, 1);
	}

	.margin-top-32 {
		margin-top: 32rpx;
	}

	.margin-top-12 {
		margin-top: 12rpx;
	}

	.margin-bottom-40 {
		margin-bottom: 40rpx;
	}

	.margin-top-40 {
		margin-top: 40rpx;
	}

	.margin-left-32 {
		margin-left: 32rpx;
	}

	.margin-left-24 {
		margin-left: 24rpx;
	}

	.margin-right-48 {
		margin-right: 48rpx;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.justify-content-center {
		justify-content: center !important;
	}

	.justify-content-space-between {
		justify-content: space-between !important;
	}

	.align-items-center {
		align-items: center !important;
	}


	.user-sex {
		position: absolute;
		bottom: 2rpx;
		right: 2rpx;
		width: 36rpx;
		height: 36rpx;

		border-radius: 50%;
		align-items: center;
		justify-content: center;
	}

	.user-sex-W {
		background-color: rgba(255, 132, 153, 1);
	}

	.user-sex-M {
		background-color: rgba(2, 183, 230, 1);
	}

	.tab-content {
		padding: 44rpx 48rpx;
	}

	.tab-content-li {
		width: 100%;
		height: 112rpx;
		align-items: center;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	::v-deep .u-tag__text--medium {
		font-size: 12px;
	}

	.menu-row-2 {
		padding: 0 10px;
		height: 60px;
		align-items: center;
		border-radius: 10px;
		box-sizing: border-box;

		.center-box {
			flex: 1;
			margin-left:22rpx;
		}

		.title {
			font-size: 28rpx;
			color: $enjoy-color-title;
			font-weight: 600;
			font-family: PingFangSC, PingFang SC;
			white-space: nowrap;
			/* 确保文本在一行内显示 */
			overflow: hidden;
			/* 超出容器的文本将被隐藏 */
			text-overflow: ellipsis;
			/* 使用省略号表示被截断的文本 */
		}

		.description {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #888888;
			white-space: nowrap;
			/* 确保文本在一行内显示 */
			overflow: hidden;
			/* 超出容器的文本将被隐藏 */
			text-overflow: ellipsis;
			/* 使用省略号表示被截断的文本 */
		}
	}
	.right-box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.right-box-text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #888888;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			margin-right:15rpx;
		}
	}
	.border-bottom{
		 border-bottom: solid 1px #EEEEEE;
	}
</style>
